<template>
  <view class="content page">
    <view class="head_bg">
      <view class="null"></view>
      <!-- @tap="goPage('/subpackage/user/myDataPage')" -->
      <view class="null ft1">个人中心</view>
      <view class="mt-20 flex-bwt ml-12 mr-30">
        <view class="sign" @tap="goPage('/subpackage/sign/sign')">
          <image class="wh-100" src="https://cdn.oss.bon-top.cn/static_bc/images/sign_n.png"></image>
          <view class="redW ft flex-center ft-20 c-ff" v-if="isLogin && signData.is_can_sign === 1">签到</view>
        </view>
        <view class="group flex">
          <view class="jux" @tap="goMsg">
            <image class="wh-100" src="https://cdn.oss.bon-top.cn/static_bc/images/mes_m.png"></image>
            <view class="redW ft flex-center ft-20 c-ff" v-if="isLogin && userInfo.unread_message_num > 0">{{
              userInfo.unread_message_num
            }}</view>
          </view>
          <view class="jux ml-20" @tap="goSet">
            <image class="wh-100" src="https://cdn.oss.bon-top.cn/static_bc/images/oper_m.png"></image>
          </view>
        </view>
      </view>
      <view class="body pd-30 flex mt-20">
        <view class="avtorBox flex-center mr-30">
          <image class="avtor" :src="userInfo.u_info?.avatar
            ? userInfo.u_info?.avatar
            : 'https://cdn.oss.bon-top.cn/static_bc/images/avtor.png'
            " @tap="goPage('/subpackage/user/myDataPage')" mode="aspectFill"></image>
        </view>
        <view class="desc">
          <view class="flex" v-if="isLogin">
            <view class="ft1 mr-12" @tap="goPage('/subpackage/user/myDataPage')">{{ userInfo.u_info.nickname }}</view>
            <view class="ft c-ff normal flex-center ft-20" v-if="userInfo.u_info.level_info.id === 1">{{
              userInfo.u_info.level_info.name }}</view>
            <view class="ft c-ff lvler flex-center ft-20" v-else>
              <text class="ft-num ft-22 c-ff mt-4 mr-4">
                {{ userInfo.u_info.level_info.code }}</text>
              <text class="ft ft-20 c-dbf">
                {{ userInfo.u_info.level_info.name }}</text>
            </view>
          </view>
          <view class="flex" v-else>
            <view class="ft1 mr-12" @tap="login">{{ "登录/注册" }}</view>
            <view class="ft c-99">点击登录，享受更多服务</view>
          </view>
          <view class="mt-20 flex-eve">
            <view class="own pd-20" @tap="goPage('/subpackage/user/favoriteList')">
              <view class="ft-num">{{ userInfo?.conllect_num ?? "-" }}</view>
              <view class="ft mt-10 c-99">{{ "收藏" }}</view>
            </view>
            <text class="line"
              style="display: inline-block;width: 2rpx;height: 36rpx;background-color: #F1F1F1;"></text>
            <view class="own pd-20" @tap="goPage('/subpackage/userCoupon/index')">
              <view class="ft-num">{{ userInfo?.coupon_num ?? "-" }}</view>
              <view class="ft mt-10 c-99">{{ "优惠券" }}</view>
            </view>
            <text class="line"
              style="display: inline-block;width: 2rpx;height: 36rpx;background-color: #F1F1F1;"></text>
            <view class="own pd-20" @tap="goPage('/subpackage/integral/myIntegral')">
              <view class="ft-num">{{
                userInfo?.u_info?.integral ?? "-"
              }}</view>
              <view class="ft mt-10 c-99">{{ "积分" }}</view>
            </view>
            <text class="line"
              style="display: inline-block;width: 2rpx;height: 36rpx;background-color: #F1F1F1;"></text>
            <view class="own pd-20" @tap="goPage('/subpackage/user/browsingHistory')">
              <view class="ft-num">{{ userInfo?.view_num ?? "-" }}</view>
              <view class="ft mt-10 c-99">{{ "浏览历史" }}</view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view class="vip mt-20 ml-30 pd-20 flex-bwt" @tap="goPage('/subpackage/openVip/openVip')">
      <view>
        <view class="flex">
          <image class="w42h-36" src="https://cdn.oss.bon-top.cn/static_bc/images/vipIcon.png"></image>
          <text class="ft1 c-ff ml-8">{{ userInfo?.u_info?.is_vip === 1 ? userInfo.u_info.level_info.name : '会员权益'
          }}</text>
        </view>
        <view class="mt-10 ft c-dbf">{{ userInfo?.u_info?.is_vip === 1 ? userInfo.u_info.expire_time_show :
          '开通会员，即刻享白菜超底价' }}
        </view>
      </view>
      <view class="vipBtn flex-center">
        <text class="ft c-33 mr-8">{{ userInfo?.u_info?.is_vip === 1 ? '去续期' : '去开通' }}</text>
        <image class="wh-24" src="https://cdn.oss.bon-top.cn/static_bc/images/icon_left.png"></image>
      </view>
      <view class="pso ft c-ff flex-center">{{
        "专享白菜价 | 一对一专业老师 | 专属客服"
      }}</view>
    </view>
    <view class="card_1 pd-20">
      <view class="ft1">我的订单</view>
      <view class="card_1_list mt-20">
        <view class="flex-center type" @tap="goPage('/subpackage/orderList/myOrderl?order_status=待付款')">
          <image class="wh-62" src="https://cdn.oss.bon-top.cn/static_bc/images/iconm_1.png"></image>
          <view class="mt-10 ft c-99">待付款</view>
          <view class="redW ft flex-center ft-20 c-ff" v-if="isLogin && userInfo.order_count_data.wait_pay > 0">{{
            userInfo.order_count_data.wait_pay
          }}</view>
        </view>
        <view class="flex-center type" @tap="goPage('/subpackage/orderList/myOrderl?order_status=办理中')">
          <image class="wh-62" src="https://cdn.oss.bon-top.cn/static_bc/images/iconm_2.png"></image>
          <view class="mt-10 ft c-99">办理中</view>
          <view class="redW ft flex-center ft-20 c-ff" v-if="isLogin && userInfo.order_count_data.is_handle > 0">{{
            userInfo.order_count_data.is_handle
          }}</view>
        </view>
        <view class="flex-center type" @tap="goPage('/subpackage/orderList/myOrderl?order_status=已完成')">
          <image class="wh-62" src="https://cdn.oss.bon-top.cn/static_bc/images/iconm_3.png"></image>
          <view class="mt-10 ft c-99">已完成</view>
          <view class="redW ft flex-center ft-20 c-ff" v-if="isLogin && userInfo.order_count_data.is_finish > 0">{{
            userInfo.order_count_data.is_finish
          }}</view>
        </view>
        <view class="flex-center type" @tap="goPage('/subpackage/orderList/myOrderl?order_status=已取消')">
          <image class="wh-62" src="https://cdn.oss.bon-top.cn/static_bc/images/iconm_4.png"></image>
          <view class="mt-10 ft c-99">已取消</view>
          <view class="redW ft flex-center ft-20 c-ff" v-if="isLogin && userInfo.order_count_data.is_close > 0">{{
            userInfo.order_count_data.is_close
          }}</view>
        </view>
        <view class="flex-center type" @tap="goPage('/subpackage/refund/myRefund')">
          <image class="wh-62" src="https://cdn.oss.bon-top.cn/static_bc/images/iconm_5.png"></image>
          <view class="mt-10 ft c-99">退款/售后</view>
          <view class="redW ft flex-center ft-20 c-ff" v-if="isLogin && userInfo.order_count_data.is_refund > 0">{{
            userInfo.order_count_data.is_refund
          }}</view>
        </view>
      </view>
      <view class="pd-20 mt-20 pin flex-bwt" @tap="goPage('/subpackage/appraise/myAppraise')">
        <view class="flex">
          <image class="wh-62" src="https://cdn.oss.bon-top.cn/static_bc/images/pinm.png"></image>
          <text class="ft c-99">评价</text>
        </view>
        <view class="arrow">
          <image class="wh-100" src="https://cdn.oss.bon-top.cn/static_bc/images/right_icon.png"></image>
        </view>
      </view>
      <view class="toMore flex-center" @tap="goPage('/subpackage/orderList/myOrderl')">
        <text class="mr-8 ft c-33">查看全部</text>
        <image class="wh-24" src="https://cdn.oss.bon-top.cn/static_bc/images/icon_left.png"></image>
      </view>
    </view>

    <view class="flex-bwt mt-30 ml-30 mr-30">
      <view class="card_2 flex-bwt" @tap="goPage('/subpackage/user/myDataPage')">
        <view class="flex ml-8">
          <image class="wh-62" src="https://cdn.oss.bon-top.cn/static_bc/images/inf_1.png"></image>
          <text class="ft c-66">基础信息</text>
        </view>
        <view class="mr-20 flex-center">
          <image class="w-20h-34" src="https://cdn.oss.bon-top.cn/static_bc/images/right_icon.png"></image>
        </view>
      </view>
      <view class="card_2 flex-bwt" @tap="goPage('/subpackage/integral/myIntegral')">
        <view class="flex ml-8">
          <image class="wh-62" src="https://cdn.oss.bon-top.cn/static_bc/images/inf_2.png"></image>
          <text class="ft c-66">我的积分</text>
        </view>
        <view class="mr-20 flex-center">
          <image class="w-20h-34" src="https://cdn.oss.bon-top.cn/static_bc/images/right_icon.png"></image>
        </view>
      </view>
    </view>
    <view class="flex-bwt mt-30 ml-30 mr-30">
      <view class="card_2 flex-bwt" @tap="goPage('/subpackage/bank/bankCard')">
        <view class="flex ml-8">
          <image class="wh-62" src="https://cdn.oss.bon-top.cn/static_bc/images/inf_3.png"></image>
          <text class="ft c-66">我的银行</text>
        </view>
        <view class="mr-20 flex-center">
          <image class="w-20h-34" src="https://cdn.oss.bon-top.cn/static_bc/images/right_icon.png"></image>
        </view>
      </view>
      <view class="card_2 flex-bwt" @tap="goPage('/subpackage/address/myAddress')">
        <view class="flex ml-8">
          <image class="wh-62" src="https://cdn.oss.bon-top.cn/static_bc/images/inf_4.png"></image>
          <text class="ft c-66">收件地址</text>
        </view>
        <view class="mr-20 flex-center">
          <image class="w-20h-34" src="https://cdn.oss.bon-top.cn/static_bc/images/right_icon.png"></image>
        </view>
      </view>
    </view>
    <view class="teacher pd-20" v-if="isLogin && userInfo?.u_info.sale_id">
      <view class="ft1">老师管理</view>
      <view class="mt-20 teacher_list">
        <view class="flex-center card_3" v-for="(item, index) in cadList" :key="index" @tap="goPage(item.url)">
          <view class="img">
            <image class="wh-100" :src="item.src" mode="aspectFill"></image>
          </view>
          <view class="ft c-66">{{ item.desc }}</view>
        </view>
      </view>
    </view>
    <view class="sign1 ml-30">
      <view style="height: 10rpx"></view>
      <view class="top">
        <view class="left">
          <view class="up">#项目推荐#</view>
          <view class="down ft-eng">project recommendation </view>
        </view>
        <view class="more" @tap="goMorePro">
          <text class="text">更多</text>
          <image class="icon" src="https://cdn.oss.bon-top.cn/static_bc/images/icon_left.png"></image>
        </view>
      </view>
      <view class="pd-20">
        <ComProjectList v-if="productList.length > 0" :dataList="productList" :dataObj="dataListObj"
          @getProjectList="getProductListData">
        </ComProjectList>
      </view>

    </view>
    <view style="height: 166rpx"></view>
  </view>
  <comTabBar :currentIndex="4"></comTabBar>

</template>

<script setup>
import { onLaunch, onLoad, onShow } from "@dcloudio/uni-app";
import { ref, onMounted, reactive, nextTick } from "vue";
import { utils } from "@/utils/utils.js";
import { api } from "@/utils/api.js";
import comTabBar from "@/components/comTabBar.vue";
import ComProjectList from "@/components/comProjectList.vue";


const userInfo = ref({});
const isLogin = ref(false);
let pageInfo = reactive({
  page: 1,
  pageSize: 10
})
let userInfoMsg = ref(uni.getStorageSync('userInfo'))
const cadList = ref([
  {
    src: "https://cdn.oss.bon-top.cn/static_bc/images/day_1.png",
    desc: "发布日常",
    url: '/subpackage/teacher/upload'
  },
  {
    src: "https://cdn.oss.bon-top.cn/static_bc/images/day_2.png",
    desc: "推荐项目",
    url: '/subpackage/teacher/recommendDemo'
  },
  {
    src: "https://cdn.oss.bon-top.cn/static_bc/images/day_3.png",
    desc: "编辑信息",
    url: '/subpackage/teacher/editData'
  },
  {
    src: "https://cdn.oss.bon-top.cn/static_bc/images/day_4.png",
    desc: "我的主页",
    url: `/subpackage/teacher/teacherDetail?id=${userInfoMsg.value.sale_id}`
  },
  {
    src: "https://cdn.oss.bon-top.cn/static_bc/images/day_5.png",
    desc: "产品佣金",
    url: '/subpackage/ProductCommission/index'
  },
]);
const signData = ref({});
const token = uni.getStorageSync("token");

const getSignListData = () => {
  if (token.length > 0) {
    utils.request(api.getSignData, {}, "get").then((res) => {
      console.log('res===>', res)
      signData.value = res.data.info;
    });
    // vipData.value = uni.getStorageSync("userInfo").level_info;
  }
};
const login = () => {
  uni.navigateTo({
    url: "/subpackage/login/login",
  });
};
const goBuyVip = () => {
  uni.navigateTo({
    url: "/subpackage/openVip/openVip",
  });
}

const getUserData = () => {

  utils.request(api.myCenter, {}, "get").then((res) => {
    if (res.code == 200) {
      isLogin.value = true;
      userInfo.value = res.data.info;
      console.log('isLogin.value', isLogin.value)
    }
  });
};

//更多项目
const goMorePro = () => {
  uni.reLaunch({
    url: `/pages/cart/cart`
  })
}
// 跳转
const goPage = (url) => {
  console.log('url', url)
  // uni.showModal({
  //   title: '提示',
  //   content: 'url' + url,
  //   showCancel: true,
  //   success: ({ confirm, cancel }) => { }
  // })
  // uni.showModal({
  //   title: '提示',
  //   content: 'userInfoMsg' + userInfoMsg.value.sale_id,
  //   showCancel: true,
  //   success: ({ confirm, cancel }) => { }
  // })
  setTimeout(() => {
    if (isLogin.value) {
      uni.navigateTo({
        url: url,
      });
    } else {
      login()
    }
  }, 500)


}
// const goSign = () => {
//   if (isLogin.value) {
//     uni.navigateTo({
//       url: "/subpackage/sign/sign",
//     });
//   } else {
//     login()
//   }

// }

const goProjectDetail = (id) => {
  uni.navigateTo({
    url: `/subpackage/immigration/immigration?id=${id}`,
  });
}

const goMsg = () => {
  if (isLogin.value) {
    uni.navigateTo({
      url: "/subpackage/message/message",
    });
  } else {
    login()
  }

}

const goSet = () => {
  if (isLogin.value) {
    uni.navigateTo({
      url: "/subpackage/settings/mySettings",
    });
  } else {
    login()
  }

}

const initData = () => {
  const token = uni.getStorageSync("token");
  console.log(token, "token");
  if (token && token.length > 0) {
    console.log('哈哈哈哈')
    getUserData();
  }
};

//获取热门项目列表
const productList = ref([]);
let dataListObj = reactive({});
const getProductListData = () => {
  utils
    .request(
      api.getProductList,
      {
        page: 1,
        pageSize: 5,
        isRandom: 1,
      },
      "post"
    )
    .then((res) => {
      productList.value = res.data.items;
      dataListObj = res.data;
    });
};

onMounted(() => {
  initData();
  getSignListData()
  getProductListData();
  console.log('isLogin.value', isLogin.value)
  // console.log('userInfoMsg.sale_id', userInfoMsg.value.sale_id)
  // nextTick(() => {
  //   cadList.value[3].url = `/subpackage/teacher/teacherDetail?id=${userInfoMsg.value.sale_id}`
  // })

})
onLoad(() => {
  cadList.value[3].url = `/subpackage/teacher/teacherDetail?id=${userInfoMsg.value.sale_id}`

})
onShow(() => {
  initData();
  getProductListData();
})
</script>

<style lang="scss" scoped>
.content {
  position: relative;

  .head_bg {
    width: 750rpx;
    height: 500rpx;
    background: linear-gradient(90deg, #dbf046 0%, #bfffbb 100%);
    border-radius: 0rpx 0rpx 0rpx 0rpx;
    background-image: url("https://cdn.oss.bon-top.cn/static_bc/images/mine_bg.png");
    background-size: 100% 100%;

    .null {
      width: 750rpx;
      height: 88rpx;
      line-height: 88rpx;
      box-sizing: border-box;
      padding-left: 30rpx;
    }

    .sign {
      width: 92rpx;
      height: 92rpx;
      position: relative;

      .redW {
        position: absolute;
        top: -10rpx;
        right: -8rpx;
        width: 60rpx;
        height: 28rpx;
        background: #ff0000;
        border-radius: 20rpx 20rpx 20rpx 20rpx;
      }
    }

    .jux {
      position: relative;
      width: 56rpx;
      height: 56rpx;
      background: #ffffff;
      border-radius: 20rpx 20rpx 20rpx 20rpx;

      .redW {
        position: absolute;
        top: -16rpx;
        right: -16rpx;
        box-sizing: border-box;
        padding-left: 8rpx;
        padding-right: 8rpx;
        height: 28rpx;
        background: #ff0000;
        border-radius: 20rpx 20rpx 20rpx 20rpx;
      }
    }
  }

  .body {
    width: 750rpx;
    // height: 195rpx;
    background: #ffffff;
    // border: 2rpx solid red;
    border-radius: 40rpx 40rpx 0rpx 0rpx;

    .avtorBox {
      width: 136rpx;
      height: 136rpx;
      background: #ffffff;
      border: 2rpx solid #f1f1f1;
      border-radius: 50%;

      .avtor {
        width: 120rpx;
        height: 120rpx;
        border-radius: 50%;
      }
    }

    .normal {
      width: 100rpx;
      height: 36rpx;
      background: #333333;
      border-radius: 8rpx 8rpx 8rpx 8rpx;
    }

    .lvler {
      width: 136rpx;
      height: 36rpx;
      background: #333333;
      border-radius: 8rpx 8rpx 8rpx 8rpx;
    }

    .own {
      //width: 114rpx;
      height: 94rpx;
      // border-right: 2rpx solid #f1f1f1;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }

    .own:last-child {
      border: none;
    }
  }

  .vip {
    position: relative;
    width: 690rpx;
    height: 120rpx;
    background: #333333;
    border-radius: 20rpx 20rpx 20rpx 20rpx;
    background-image: url("https://cdn.oss.bon-top.cn/static_bc/images/vipBg.png");
    background-size: 100% 100%;
    top: 30rpx;

    .vipBtn {
      width: 142rpx;
      height: 72rpx;
      background: #dbf046;
      border-radius: 20rpx 20rpx 20rpx 20rpx;
    }

    .pso {
      position: absolute;
      top: -34rpx;
      width: 430rpx;
      height: 44rpx;
      background: linear-gradient(180deg, #5a54ff 0%, #2b24db 100%);
      border-radius: 10rpx 20rpx 10rpx 20rpx;
    }
  }

  .card_1 {
    width: calc(100% - 60rpx);
    // height: 396rpx;
    margin: 30rpx auto 0;
    background: #f8f8f8;
    border-radius: 40rpx 40rpx 40rpx 40rpx;
    box-sizing: border-box;

    &_list {
      width: 100%;
      // background: #bfffbb;
      display: flex;
      gap: 20rpx;
    }

    .type {
      position: relative;
      width: 114rpx;
      height: 120rpx;
      background: #ffffff;
      border-radius: 20rpx 20rpx 20rpx 20rpx;
      flex-direction: column;

      .redW {
        position: absolute;
        top: -16rpx;
        right: -16rpx;
        box-sizing: border-box;
        padding-left: 8rpx;
        padding-right: 8rpx;
        height: 28rpx;
        background: #ff0000;
        border-radius: 20rpx 20rpx 20rpx 20rpx;
      }
    }

    .pin {
      width: 650rpx;
      height: 82rpx;
      background: #ffffff;
      border-radius: 20rpx 20rpx 20rpx 20rpx;

      .arrow {
        width: 28rpx;
        height: 48rpx;
      }
    }

    .toMore {
      width: 650rpx;
      height: 74rpx;
      background: linear-gradient(180deg,
          rgba(255, 255, 255, 0) 0%,
          #ffffff 100%);
      border-radius: 0rpx 0rpx 40rpx 40rpx;
    }
  }

  .card_2 {
    width: 330rpx;
    height: 82rpx;
    background: #f8f8f8;
    border-radius: 20rpx 20rpx 20rpx 20rpx;
  }

  .teacher {
    width: calc(100% - 60rpx);
    background: #f8f8f8;
    border-radius: 40rpx;
    margin: 30rpx auto 0;

    &_list {
      display: flex;
      gap: 20rpx;
    }

    .card_3 {
      flex-direction: column;
      width: 114rpx;
      height: 120rpx;
      background: #ffffff;
      border-radius: 20rpx 20rpx 20rpx 20rpx;

      .img {
        width: 62rpx;
        height: 62rpx;
      }
    }
  }

  .sign1 {
    margin-top: 60rpx;
    width: 690rpx;
    min-height: 252rpx;
    background: linear-gradient(180deg, #fbffdf 0%, #ffffff 100%);
    border-radius: 40rpx 40rpx 40rpx 40rpx;

    .top {
      margin-top: 20rpx;
      width: 100%;
      display: flex;
      justify-content: space-between;

      .left {
        position: relative;
        flex: 1;
        height: 44rpx;
        // background-color: red;

        .up {
          width: 100%;
          height: 44rpx;
          font-weight: 800;
          font-size: 32rpx;
          color: #333333;
          position: absolute;
          top: 0;
          left: 20rpx;
          z-index: 9;
        }

        .down {
          width: 100%;
          height: 44rpx;
          line-height: 44rpx;
          position: absolute;
          top: 14rpx;
          left: 20rpx;
          // font-family: 'DIN COROS';
          font-weight: 400;
          font-size: 44rpx;
          color: #dbf046;
          opacity: 0.5;
          z-index: 2;
        }
      }

      .right {
        width: 176rpx;
        height: 54rpx;
        background: #333333;
        border-radius: 20rpx 20rpx 20rpx 20rpx;
        font-weight: 400;
        font-size: 24rpx;
        color: #dbf046;
        text-align: center;
        line-height: 54rpx;
        margin-right: 20rpx;
      }

      .more {
        width: 122rpx;
        margin-right: 20rpx;
        height: 54rpx;

        display: flex;
        justify-content: center;
        align-items: center;
        background: #ffffff;
        border-radius: 20rpx 20rpx 20rpx 20rpx;
        border: 2rpx solid #333333;

        .text {
          font-weight: 400;
          font-size: 24rpx;
          color: #333333;
          margin-right: 8rpx;
        }

        .icon {
          width: 24rpx;
          height: 24rpx;
        }
      }
    }

    .mildle {
      width: 100%;
      margin-top: 30rpx;
      display: flex;
      justify-content: space-between;

      .left {
        flex: 1;
        display: flex;
        margin-left: 20rpx;
        justify-content: space-evenly;
        align-items: center;

        .item {
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          width: 110rpx;
          height: 116rpx;
          background: #ffffff;
          border-radius: 20rpx 20rpx 20rpx 20rpx;
          border: 2rpx solid #f1f1f1;

          .icon {
            width: 32rpx;
            height: 32rpx;
          }

          .date {
            font-weight: 400;
            font-size: 24rpx;
            color: #333333;
          }
        }
      }

      .right {
        margin-right: 20rpx;
        width: 252rpx;
        height: 114rpx;
        background: #dbf046;
        border-radius: 20rpx 20rpx 20rpx 20rpx;

        .icon {
          width: 100%;
          height: 100%;
        }
      }
    }

    .video {
      display: flex;
      width: 100%;
      justify-content: space-evenly;

      .one {
        width: 314rpx;
        height: 558rpx;
        background: #f1f1f1;
        border-radius: 40rpx 40rpx 40rpx 40rpx;
      }
    }

    .player {
      position: relative;
      width: 650rpx;
      height: 370rpx;
      background: #dbf046;
      border-radius: 40rpx 40rpx 40rpx 40rpx;

      .open {
        position: absolute;
        top: 22rpx;
        left: 32rpx;
        width: 158rpx;
        height: 48rpx;
        background: #fff;
        border-radius: 40rpx 40rpx 40rpx 40rpx;
        //border: 2rpx solid #333333;
        opacity: 0.8;

        .pos {
          position: absolute;
          top: 8rpx;
          left: 10rpx;
        }

        .pos1 {
          position: absolute;
          top: 8rpx;
          left: 52rpx;
        }
      }
    }

    .next {
      .one {
        position: relative;
        width: 314rpx;
        height: 184rpx;
        background: linear-gradient(90deg,
            #1746ff 0%,
            #1746ff 34%,
            rgba(23, 70, 255, 0) 100%);
        border-radius: 40rpx 40rpx 40rpx 40rpx;

        .btn {
          position: absolute;
          top: 10rpx;
          left: 10rpx;
          width: 276rpx;
          height: 52rpx;
          background: #ffffff;
          border-radius: 44rpx 44rpx 44rpx 44rpx;
          opacity: 0.6;

          .pos {
            position: absolute;
            top: 10rpx;
            left: 10rpx;
          }

          .pos1 {
            position: absolute;
            top: 10rpx;
            left: 52rpx;
          }
        }
      }
    }
  }

  .project {
    margin: auto;
    margin-top: 20rpx;
    margin-bottom: 20rpx;
    width: 650rpx;
    height: 408rpx;
    background: #ffffff;
    border-radius: 40rpx 40rpx 40rpx 40rpx;
    border: 2rpx solid #f1f1f1;

    .left {
      width: 222rpx;
      height: 274rpx;
      border-radius: 40rpx 40rpx 40rpx 40rpx;
    }

    .right {
      flex: 1;
      height: 274rpx;

      .top {
        .tip {
          // width: 88rpx;
          height: 36rpx;
          background: linear-gradient(88deg, #dbf046 0%, #ffee7e 100%);
          border-radius: 8rpx 8rpx 8rpx 8rpx;
        }
      }

      .domn {
        .price {
          width: 148rpx;
          height: 92rpx;
          background: linear-gradient(90deg,
              #fff5f3 0%,
              rgba(255, 245, 243, 0) 100%);
          border-radius: 20rpx 20rpx 20rpx 20rpx;
        }

        .price2 {
          width: 148rpx;
          height: 92rpx;
          background: #fff;
          border-radius: 20rpx 20rpx 20rpx 20rpx;
        }
      }
    }

    .foot {
      width: 610rpx;
      height: 74rpx;
      background: linear-gradient(92deg,
          #f8f8f8 0%,
          rgba(248, 248, 248, 0) 100%);
      border-radius: 40rpx 40rpx 40rpx 40rpx;
    }
  }
}
</style>
